<!-- 银行流水上传组件 -->
<template>
<section class="bank-statement-upload">
    <div v-for="(item, index) in dataList" :key="item.id" class="line-item">
        <el-upload
            ref="bankStatementUploadComponent"
            class="bank-statement-upload-item"
            accept=".xlsx,.xls"
            action="/upload/bankStatement"
            :http-request="uploadFile"
            :multiple="false"
            :limit="1"
            :on-exceed="onExceed"
            :on-remove="removeFile"
            :with-credentials="true"
            :data="item"
            :disabled="item.bankType === null">
            <el-select
                v-model="item.bankType"
                placeholder="请选择银行"
                size="mini">
                <el-option
                    v-for="item in bankList"
                    :key="item.name"
                    :label="item.name"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-button :disabled="item.bankType === null" size="mini" type="primary">点击上传【银行流水表】excel</el-button>
            <span v-if="dataList.length > 1" class="el-icon-delete" @click.stop="deleteItem(index)"></span>
            <span v-if="dataList.length - 1 === index" class="el-icon-plus" @click.stop="addItem"></span>
        </el-upload>

    </div>
</section>
</template>
<script>
import map from '@/components/map';
import utiles from '@/components/utiles';

export default {
    props: [
        'accountBillData'
    ],
    data() {
        return {
            dataList: [],
            bankList: map.bankList,
            uploadFinished: false
        };
    },
    mounted() {
        this.addItem();
    },
    methods: {

        /**
         * 上传文件
         *
         * @param {Object} fileData 文件数据
         */
        uploadFile(fileData) {
            const formData = new FormData();
            // 键值
            formData.append('cName', this.accountBillData.companyName);
            formData.append('file', fileData.file);
            formData.append('fileName', fileData.file.name);
            formData.append('bankType', fileData.data.bankType);

            // 上传期间, 先关闭可保存按钮
            this.uploadFinished = false

            this.$http.post(
                fileData.action,
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    onUploadProgress: progressEvent => {
                        const complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
                        fileData.onProgress({ percent: complete })
                    }
                }
            ).then(res => {
                fileData.data.fileId = res.data.fileId;
                fileData.data.file = fileData.file;
                this.uploadFinished = true;
                this.$emit("uploadBankFinished", this.uploadFinished);
                this.uploadFinished = false;
            }).catch(err => {
                console.error(err);
            });
        },

        /**
         * 超出最大上传数
         */
        onExceed() {
            this.$message.error('此条银行流水已上传，如需更新请删除后再重新上传');
        },

        /**
         * 删除已上传的文件
         */
        removeFile(file) {
            this.dataList.some((item, index) => {
                if (item.file && item.file.uid === file.uid) {
                    this.dataList.splice(index, 1);
                    return true;
                }
            });
        },

        /**
         * 删除一条
         *
         * @param {Int} index 序号
         */
        deleteItem(index) {
            this.dataList.splice(index, 1);
        },

        /**
         * 添加一条
         */
        addItem() {
            this.dataList.push({
                id: utiles.getUUID(),
                bankType: null,
                fileId: '',
                file: null
            });
            this.$emit("uploadBankFinished", this.uploadFinished);
        },

        /**
         * 对外提供数据
         */
        getValue() {
            const result = [];
            if(this.dataList[0].fileId === ""){
                var start = new Date();
                while(new Date() - start < 2000) { // delay 2 sec
                    ;
                }
            }
            // while(!this.uploadFinished){
            //     ;
            // }
            this.dataList.forEach(item => {
                // console.log("refs:", JSON.parse(JSON.stringify(datalist[0])))
                if (item.fileId) {
                    result.push(item.fileId);
                }
            });
            return result;
        }
    }
}
</script>
<style lang="less">
@import '../assets/var.less';
.bank-statement-upload {
    .line-item {
        margin-bottom: 5px;
    }
    .bank-statement-upload-item {
        display: inline-block;
        flex: 0 0 400px;
        .el-button {
            width: 200px;
        }
        .el-upload-list {
            display: inline-block;
            vertical-align: top;
            .el-upload-list__item {
                margin-top: 0;
            }
        }
    }
    .el-icon-delete,
    .el-icon-plus {
        cursor: pointer;
        &:hover {
            color: @color-blue;
        }
    }
}
</style>
